<template>
  <div class="management" style="padding: 20px">
    <el-card>
      <el-form label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="managementDaTa.username"
              placeholder="根据用户名搜索"
            ></el-input>
          </el-col>
          <el-col :span="4" style="margin-left: 25px">
            <el-button @click="clearClick">清除</el-button>
            <el-button type="primary" @click="searchClick">搜索</el-button>
          </el-col>
          <el-row type="flex" justify="end">
            <el-col :span="2">
              <el-button
                class="add_new_users"
                type="success"
                icon="el-icon-edit"
                @click="showAddDialog = true"
                >新增用户</el-button
              >
            </el-col>
          </el-row>
        </el-row>
      </el-form>
      <!-- 消息提示 -->
      <el-alert
        style="margin-top: 20px"
        :title="title"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- tabel表格 -->
      <el-table :data="list" style="width: 100%;margin-top:30px">
        <el-table-column type="index" label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" align="center">
        </el-table-column>
        <el-table-column prop="username" label="用户名" align="center">
        </el-table-column>
        <el-table-column
          prop="permission_group_title"
          label="权限组名称"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="role" label="角色" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              plain
              circle
              @click="editClick(row)"
            />
            <el-button
              @click="delClick(row.id)"
              type="danger"
              icon="el-icon-delete"
              plain
              circle
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top:20px">
        <el-pagination
          background
          layout=" prev, pager, next,sizes,jumper"
          :total="total"
          :current-page="page.page"
          :page-sizes="[1, 3, 5]"
          :page-size="page.pagesize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>

      <!-- 编辑弹出层
       -->
      <!-- <edit-management
        v-if="showDialog"
        :showDialog.sync="showDialog"
        :addForm="addForm"
        @btnOK="getManagementList"
        @btnCancel="btnCancel"
      /> -->

      <!-- 添加弹出层 -->
      <add-management
        v-if="showAddDialog"
        :showAddDialog.sync="showAddDialog"
        :addFormData="addFormData"
        @btnCancels="btnCancels"
        @btnOKs="getManagementList"
      />
    </el-card>
  </div>
</template>

<script>
import { getManagementList, delManagementList } from '@/api/management'
// import EditManagement from './components/editManagement.vue'
import AddManagement from './components/addManagement.vue'
export default {
  name: '',
  components: {
    AddManagement
  },
  props: {},
  data() {
    return {
      managementDaTa: {
        username: '' // 用户名
      },
      page: {
        page: 1,
        pagesize: 5
      },
      total: 0,
      title: '共0条记录',
      list: [],
      // showDialog: false, // 编辑弹框
      // addForm: {
      //   avatar: '', // 头像
      //   username: 'sda', //  用户名
      //   email: 'asd', // 邮箱
      //   role: 'ss', // 角色
      //   // permission_group_title: '', // 权限组名称
      //   permission_group_id: 3,
      //   phone: '', // 联系电话
      //   introduction: '', // 介绍
      //   sex: '男',
      //   password: '123456'
      // },
      showAddDialog: false, // 添加弹框
      addFormData: {
        avatar: '0', // 头像
        username: '张三', //  用户名
        email: '123456@qq.com', // 邮箱
        role: '哈咯', // 角色
        // permission_group_title: '', // 权限组名称
        permission_group_id: 3,
        phone: '110120', // 联系电话
        introduction: '0', // 介绍
        sex: '男',
        password: '123456'
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getManagementList()
  },
  mounted() {},
  methods: {
    async getManagementList() {
      const { data } = await getManagementList(this.page)
      // console.log(data)
      this.list = data.list
      this.total = data.counts
      this.title = `共 ${this.total} 条记录`
    },
    // 分页
    handleSizeChange(newPageSize) {
      this.page.pagesize = newPageSize
      this.getManagementList()
    },
    handleCurrentChange(newPage) {
      this.page.page = newPage
      this.getManagementList()
    },
    // 删除数据
    delClick(id) {
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return delManagementList(id)
        })
        .then(() => {
          this.getManagementList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑数据
    editClick(row) {
      // console.log(row)
      this.addFormData = {
        avatar: row.avatar, // 头像
        username: row.username, //  用户名
        email: row.email, // 邮箱
        role: row.role, // 角色
        // permission_group_title: '', // 权限组名称
        permission_group_id: 3,
        phone: row.phone, // 联系电话
        introduction: row.introduction, // 介绍
        sex: '男',
        password: '123456',
        id: row.id
      }
      // this.addFormData = row
      this.showAddDialog = true
    },
    // btnCancel() {
    //   this.addForm = {
    //     avatar: '', // 头像
    //     username: 'sda', //  用户名
    //     email: 'asd', // 邮箱
    //     role: 'ss', // 角色
    //     // permission_group_title: '', // 权限组名称
    //     permission_group_id: 3,
    //     phone: '', // 联系电话
    //     introduction: '', // 介绍
    //     sex: '男',
    //     password: '123456'
    //   }
    // },
    btnCancels() {
      this.addFormData = {
        avatar: '0', // 头像
        username: '张三', //  用户名
        email: '123456@qq.com', // 邮箱
        role: '哈咯', // 角色
        // permission_group_title: '', // 权限组名称
        permission_group_id: 3,
        phone: '110120', // 联系电话
        introduction: '0', // 介绍
        sex: '男',
        password: '123456',
        id: 0
      }
    },
    async searchClick() {
      const { data } = await getManagementList(this.managementDaTa)
      // console.log(data)
      this.list = data.list
    },
    clearClick() {
      this.managementDaTa = {
        username: ''
      }
      this.getManagementList()
    }
  }
}
</script>
<style scoped>
.add_new_users {
  position: absolute;
  right: 8px;
}
</style>
